<template>
  <div>
    <el-header>
      <el-form ref="contractRule" :rules="contractRule" :model="headerCheck" label-position="right">
        <el-row>
          <el-col style="width:400px;">
            <el-form-item label="订单编号:" prop="orderId">
              <el-input v-model="headerCheck['orderId']" placeholder="请输入订单编号" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col style="width:155px;">
            <el-button class="query" @click="buttonClick">
              查询
            </el-button>
            <el-button class="query" @click="reset">
              重置
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            展示信息：
            <el-checkbox v-for="option in searchOptions" v-model="searchSelected" :label="option.id" :key="option.id">{{option.label}}</el-checkbox>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            参数示例
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="params-tip">示例参数：订单编码：1116040504144273</div>
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <div class="contentInfo" style="margin:-15px 0 20px 0;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            订单信息
          </el-col>
        </el-row>
        <el-row class="item-row">
          <el-col :span="4" class="border-content border-content-title">
            <span>订单编号:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.requestId}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>站址编码:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.siteId}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>订单状态:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.requestStatus}}</span>
          </el-col>
        </el-row>

        <el-row class="item-row">


        </el-row>

        <el-row class="item-row">
          <el-col :span="4" class="border-content border-content-title">
            <span>场地费模式:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.siteRentMode}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>{{orderInfo.siteRentMode === '包干'? '包干费' : '场地费原始值'}}:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <el-tooltip class="item" effect="dark" content="场地租金" placement="top">
              <span>{{orderInfo.fieldRent}}</span>
            </el-tooltip>
            <span v-if="orderInfo.coordinationFee">/</span>
            <el-tooltip class="item" effect="dark" content="进场协调费" placement="top">
              <span>{{orderInfo.coordinationFee}}</span>
            </el-tooltip>
            <span v-if="orderInfo.fieldFee">/</span>
            <el-tooltip class="item" effect="dark" content="土地征用费用" placement="top">
              <span>{{orderInfo.fieldFee}}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>其他费用-场地费:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.otherSiteRent}}</span>
          </el-col>
        </el-row>

        <el-row class="item-row">
          <el-col :span="4" class="border-content border-content-title">
            <span>是否打标为场地费涨幅包干:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.isIncreaseUnifyRent}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>场地费包干涨幅(%):</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.unifyIncrease}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>挂高（米）:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.height}}</span>
          </el-col>
        </el-row>

        <el-row class="item-row">
          <el-col :span="4" class="border-content border-content-title">
            <span>运营商:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content">
            <span>{{orderInfo.custCompany}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title">
            <span>使用单位名称:</span>
          </el-col>
          <el-col :span="12" class="border-content border-content-content">
            <span>{{orderInfo.customerName}}</span>
          </el-col>
        </el-row>

        <el-row class="item-row">
          <el-col :span="4" class="border-content border-content-title hasbtborder">
            <span>赔偿费用合计（元）:</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-content hasbtborder">
            <span>{{orderInfo.totalDamages}}</span>
          </el-col>
          <el-col :span="4" class="border-content border-content-title hasbtborder">
            <span>产品配置:</span>
          </el-col>
          <el-col :span="12" class="border-content border-content-content hasbtborder">
            <span>{{orderInfo.prodConfig}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="contentInfo" v-show="searchSelected.includes(0)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            合同信息
          </el-col>
        </el-row>
        <el-table v-loading="contractListLoading" ref="contractTable" :data="contractData" border class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="contractno" align="center" label="合同编号" width="180" fixed show-overflow-tooltip />
          <el-table-column prop="contractstate" align="center" label="合同状态" width="100" show-overflow-tooltip />
          <el-table-column prop="contracttype" align="center" label="合同类型" width="100" show-overflow-tooltip />
          <el-table-column prop="validdatestart" align="center" label="合同开始日期" width="120" show-overflow-tooltip />
          <el-table-column prop="validdateend" align="center" label="合同结束日期" width="120" show-overflow-tooltip />
          <el-table-column prop="taxrate" align="center" label="合同税率" />
          <el-table-column prop="singleYearMoney" :formatter="formatMoney" align="center" label="单站年租金(元)" width="120" />
          <el-table-column prop="totalmoney" :formatter="formatMoney" align="center" label="合同总金额(元)(含税)" width="160" />
          <el-table-column prop="singleAllMoneyNoTax" :formatter="formatMoney" align="center" label="单站总金额(元)(含税)"
            width="160" />
          <el-table-column prop="totalmoney" :formatter="formatMoney" align="center" label="单站总金额(元)(不含税)" width="160" />
          <el-table-column prop="isSpecialInvoice" align="center" label="是否开具增值税专用发票" width="170" />
          <el-table-column prop="operator" align="center" label="传导运营商" width="120" show-overflow-tooltip />
          <el-table-column prop="paymoney" :formatter="formatMoney" align="center" label="计划付款金额(元)" width="140" />
          <el-table-column prop="paydate" align="center" label="计划付款日期" width="120" show-overflow-tooltip />
          <el-table-column prop="date" align="center" label="场租涨幅上限" width="120" show-overflow-tooltip />
        </el-table>
      </div>
      <div class="contentInfo" v-show="searchSelected.includes(1)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场租卡片信息
          </el-col>
        </el-row>
        <el-table v-loading="colocationListLoading" ref="colocationTable" border :data="colocationData" class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="cardCode" align="center" label="场租卡片编号" width="180" fixed show-overflow-tooltip />
          <el-table-column prop="contractCode" align="center" label="合同编号" width="180" show-overflow-tooltip />
          <el-table-column prop="cardAccountantCourse" align="center" label="卡片会计科目" width="120" show-overflow-tooltip />
          <el-table-column prop="cardSource" align="center" label="卡片来源" width="100" show-overflow-tooltip />
          <el-table-column prop="originalCost" :formatter="formatMoney" align="center" label="原值(元)" width="100"
            show-overflow-tooltip />
          <el-table-column prop="amortizationAmount" :formatter="formatMoney" align="center" label="月摊销额(元)" width="100"
            show-overflow-tooltip />
          <el-table-column prop="accumulatedAmortization" :formatter="formatMoney" align="center" label="累计摊销额(元)"
            width="120" show-overflow-tooltip />
          <el-table-column prop="amortizationMonths" align="center" label="摊销期(月)" width="100" show-overflow-tooltip />
          <el-table-column prop="amortizationBeginDate" align="center" label="摊销起始日期" width="120" />
          <el-table-column prop="amortizationEndDate" align="center" label="摊销终止日期" width="120" />
        </el-table>
      </div>
      <div class="contentInfo" v-show="searchSelected.includes(2)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            合同续签单(物业系统不再续签审批记录)
          </el-col>
        </el-row>
        <el-table v-loading="renewListLoading" ref="renewTable" :data="renewData" border class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="contractno" align="center" label="合同编号" width="200" />
          <el-table-column prop="workOrderNo" align="center" label="合同续签单编号" width="200" />
          <el-table-column prop="needRenew" align="center" label="是否需要续签" />
          <el-table-column prop="auditState" align="center" label="续签单审核状态" width="180" />
          <el-table-column prop="workOrderState" align="center" label="续签单状态" />
          <el-table-column prop="createDateTime" align="center" label="续签单创建时间" width="150" show-overflow-tooltip />
          <el-table-column prop="lastModifiedDateTime" align="center" label="最后修改时间" width="150" show-overflow-tooltip />
        </el-table>
      </div>
      <div class="contentInfo" v-show="searchSelected.includes(3)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            同租户（运营商）其他订单信息
          </el-col>
        </el-row>
        <el-table v-loading="otherListLoading" ref="otherTable" border :data="otherData" class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="siteId" align="center" label="站址编码" width="200" fixed />
          <el-table-column prop="requestId" align="center" label="订单编号" width="200" />
          <el-table-column prop="requestStatus" align="center" label="订单状态" />
          <el-table-column prop="custCompany" align="center" label="运营商" />
          <el-table-column prop="prodConfig" align="center" label="产品配置" />
          <el-table-column prop="height" align="center" label="挂高" />
          <el-table-column prop="siteRentMode" align="center" label="场地费模式" width="120" />
          <el-table-column prop="fieldFee" :formatter="formatMoney" align="center" label="场地费原始值(元)" width="180" />
          <el-table-column prop="otherSiteRent" :formatter="formatMoney" align="center" label="其他费用-场地费(元)" width="180"
            show-overflow-tooltip />
        </el-table>
      </div>
      <!-- 站点信息-->
      <div class="contentInfo" v-show="searchSelected.includes(4)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            站点信息
          </el-col>
        </el-row>
        <el-table v-loading="siteInfoLoading" ref="otherTable" border :data="siteInfoData" class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="siteId" align="center" label="站址编码" width="200" show-overflow-tooltip />
          <el-table-column prop="mntState" align="center" label="站址状态" width="120" />
          <el-table-column prop="longitude" align="center" label="经度" width="120" />
          <el-table-column prop="latitude" align="center" label="维度" width="120" />
          <el-table-column prop="siteName" align="center" label="运营商站址名称" width="150" show-overflow-tooltip />
          <el-table-column prop="newSiteName" align="center" label="铁塔站址名称" width="150" show-overflow-tooltip />
          <el-table-column prop="detailAddress" align="center" label="所在地址" show-overflow-tooltip />
        </el-table>
      </div>

      <!-- 铁塔配置信息-->
      <div class="contentInfo" v-show="searchSelected.includes(5)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            铁塔配置信息
          </el-col>
        </el-row>
        <el-table v-loading="towerConfigInfoLoading" ref="otherTable" border :data="towerConfigInfoData" class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="towerId" align="center" label="CRM侧铁塔编码" show-overflow-tooltip />
          <el-table-column prop="towerType" align="center" label="CRM侧铁塔类型" width="150" show-overflow-tooltip />
          <el-table-column prop="resourceId" align="center" label="资源侧铁塔编码" show-overflow-tooltip />
          <el-table-column prop="resourceType" align="center" label="资源侧铁塔类型" width="150" show-overflow-tooltip />
          <el-table-column prop="typeId" align="center" label="铁塔细分类型" width="150" show-overflow-tooltip />

        </el-table>
      </div>

      <!-- 机房配置信息-->
      <div class="contentInfo" v-show="searchSelected.includes(6)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            机房配置信息
          </el-col>
        </el-row>
        <el-table v-loading="roomConfigInfoLoading" ref="otherTable" border :data="roomConfigInfoData" class="table-bottom"
          element-loading-text="数据加载中...">
          <el-table-column prop="roomId" align="center" label="CRM侧机房编码" show-overflow-tooltip />
          <el-table-column prop="roomType" align="center" label="CRM侧机房类型" width="150" show-overflow-tooltip />
          <el-table-column prop="resRoomId" align="center" label="资源侧机房编码" show-overflow-tooltip />
          <el-table-column prop="productType" align="center" label="资源侧机房类型" width="150" show-overflow-tooltip />
          <el-table-column prop="typeId" align="center" label="机房细分类型" width="150" show-overflow-tooltip />

        </el-table>
      </div>


    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryCount:0,
        contractListLoading: false,
        colocationListLoading: false,
        renewListLoading: false,
        otherListLoading: false,
        siteInfoLoading: false,
        towerConfigInfoLoading: false,
        roomConfigInfoLoading: false,
        headerCheck: {
          orderId: '',
          content: '00'
        },
        contractData: [],
        colocationData: [],
        renewData: [],
        otherData: [],
        siteInfoData: [],
        towerConfigInfoData: [],
        roomConfigInfoData: [],
        orderInfo: {},
        options: [{
            value: '全部',
            key: '00'
          },
          {
            value: '改错:计费数据与场租成本数据不符',
            key: '01'
          },
          {
            value: '改错:同租户多个订单重复计费',
            key: '02'
          },
          {
            value: '合同新签或到期续签',
            key: '03'
          },
          {
            value: '合同税率变更',
            key: '04'
          },
          {
            value: '合同到期不再续签',
            key: '05'
          },
          {
            value: '包干场地费改为传导',
            key: '06'
          },
          {
            value: '成本无法与收入保持一致',
            key: '07'
          }
        ],
        searchOptions: [{
            id: 0,
            label: '合同信息'
          },
          {
            id: 1,
            label: '场租卡片信息'
          },
          {
            id: 2,
            label: '合同续签单信息'
          },
          {
            id: 3,
            label: '同站址同租户其他订单'
          },
          {
            id: 4,
            label: '站点信息'
          },
          {
            id: 5,
            label: '铁塔配置信息'
          },
          {
            id: 6,
            label: '机房配置信息'
          }
        ],
        searchSelected: [0, 1, 2, 3, 4, 5, 6],
        contractRule: {
          orderId: [{
            required: true,
            message: '请输入订单编号',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '请选择审核类型',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('2.7')
    },
    mounted() {},
    methods: {
      async buttonClick() {
        this.listLoading = true
        try {
          this.contractData = []
          this.colocationData = []
          this.renewData = []
          this.otherData = []
          this.siteInfoData = []
          this.towerConfigData = []
          this.roomConfigData = []
          this.orderInfo = {}
          await this.$refs['contractRule'].validate()
          const data = {
            requestId: this.headerCheck.orderId,
            auditType: this.headerCheck.content
          }
          const r = await this.$http({
            url: this.$http.adornBizUrl('/contract/increaseCheck'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if (r.data.data) {
            if (r.data.data.orderInfo) {
              this.orderInfo = r.data.data.orderInfo
            }

            this.contractData = r.data.data.ContractInfoList
            this.colocationData = r.data.data.RentCardList
            this.renewData = r.data.data.RenewContractList
            this.otherData = r.data.data.OtherOrderList
            this.siteInfoData = r.data.data.SiteInfoList
            this.towerConfigInfoData = r.data.data.TowerConfigInfoList
            this.roomConfigInfoData = r.data.data.RoomConfigInfoList
          }
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      formatMoney(row, column) {
        let value = ''
        var num = row[column.property]
        if (num > 0) {
          value = num
          if (value > 999) {
            let parts = value.toString().split('.')
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            value = parts.join('.')
          }
        }
        return value
      },
      reset() {
        this.headerCheck = {
          orderId: '',
          content: '00'
        }
        this.contractData = []
        this.colocationData = []
        this.renewData = []
        this.otherData = []
        this.renewData = []
        this.siteInfoData = []
        this.towerConfigInfoData = []
        this.roomConfigInfoData = []
        this.$refs['contractRule'].clearValidate()
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped>
  .el-input {
    width: 75%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
  }

  .el-table--border /deep/ th:first-child /deep/ .cell,
  .el-table /deep/ th /deep/ .cell {
    color: #333333;
  }

  .table-bottom {
    margin-bottom: 15px;
  }
</style>
